<script setup lang="ts">

import * as _ from 'lodash'
import { detail } from '@/api/download'

import { onLoad, onShareAppMessage, onShareTimeline, onPageScroll } from '@dcloudio/uni-app'
import { ref, reactive, defineProps, nextTick, computed } from 'vue'


import { download } from '@/utils/file'
import { shareUtils } from '@/utils/share'
import IndexTitle from '@/pages/walls/index-title.vue'
import useShare from '@/mixins/share'
const { getShareCover } = useShare()
const props = defineProps({
  id: String,
})



const filePath = ref('')

const show_open = ref(false)


const pdf = reactive({
  images: [],
  share_cover_url: '',
  id: '',
  title: '',
  en_title: '',
  url: "",
  filename: '',
  size_info: ''
})
const loading = ref(false)

onLoad((options) => {


  // debugger
  detail(options.id).then(res => {

    pdf.images = res.images
    pdf.title = res.pdf_name
    pdf.en_title = res.en_title
    pdf.url = res.pdf_url
    pdf.filename = res.pdf_name
    pdf.size_info = res.size_info
    pdf.id = res.id

  })

})

const open_title = ref('保存成功')

const open_content = computed(() => {
  return `文件保存在：${filePath.value}，确定打开文件吗？`
})

const handle_cancel_open = () => {
  show_open.value = false
}

const currentScrollTop = ref(-1)
const total_h = ref(0)
const scroll_view_h = ref(0)
const scrollable_h = ref(0)



const page = getCurrentPages().pop()

let path: string = page.route
onShareTimeline(() => {

  const share_path = `${path}?id=${pdf.id}`

  const title = pdf.filename ?? ''
  const promise = new Promise(resolve => {
    getShareCover(path, title, null).then(res => {
      // debugger
      res.path = shareUtils.buildPathQuery(share_path)
      resolve(res)
    })

  })

  return {
    title,
    imageUrl: null,
    path: shareUtils.buildPathQuery(share_path),
    promise
  }
})

onShareAppMessage(() => {
  const share_path = `${path}?id=${pdf.id}`
  const title = pdf.filename ?? ''

  debugger
  const promise = new Promise(resolve => {
    getShareCover(path, title, null).then(res => {
      // debugger
      res.path = shareUtils.buildPathQuery(share_path)
      resolve(res)
    })

  })

  return {
    title,
    imageUrl: null,
    path: shareUtils.buildPathQuery(share_path),
    promise
  }
})

const value = ref(1)
const scroll_into_view = ref('')






const valPlus = () => {

  value.value += 1
  debugger
  scroll_into_view.value = `#image-${value.value}`

}

const valMinus = () => {
  value.value -= 1
  debugger
  scroll_into_view.value = `#image-${value.value}`

}

const ontap = (url)=>{

  
  
  wx.previewImage({
    current:url,
    urls:pdf.images.map(el=>el.url)
  })
}


const ov_src = ref('')




const content = computed(() => {
  return `文件大小为 ${pdf.size_info}，建议在WIFI环境下载`
})

const show = ref(false)
const title = ref('确认下载吗?')
</script>

<template>
  <ForOneHeader :enableBack="true" />


  <u-loading-page :loading="loading" loading-text="下载中......"></u-loading-page>
  <MidLayout bg="#fff">
    <IndexTitle :zh_text="pdf.title" :en_text="pdf.title"></IndexTitle>

    <scroll-view @scroll="onScroll" :scroll-into-view="scroll_into_view" scroll-y class="bg scroll">


      <view class="flex" id="main">

        <view :id="'image-' + (index + 1)" v-for="item, index in pdf.images" :key="index" class="page">

          <up-image @tap="ontap(item.url)" :src="item.url" width="100%" mode="widthFix" radius="6"></up-image>
        </view>
      </view>

    </scroll-view>

  </MidLayout>



  <view class="bg footer">

    <!-- <view class="footer-layout"> -->
    <u-row customStyle="height:100%;padding:0 20rpx;">

      <u-col span="8">
       
      </u-col>

      <u-col span="2" offset="2">
        <view class="button1" v-if="pdf.url">

          <!-- <u-button type="primary" size="small" shape="circle" text="下载" icon="arrow-downward"
            @tap="handleDownload(pdf)"></u-button> -->
          <u-button color="#ed680e" type="primary" size="small" shape="circle" openType="share" text="分享"
            icon="share"></u-button>
        </view>
      </u-col>

    </u-row>


    <!-- </view> -->
  </view>


</template>

<style scoped lang="scss">
//130 + 120 + 114
.scroll {
  height: calc(100vh - 404rpx);
}

.footer {
  height: 120rpx;
}

.sku {
  padding: 25rpx 0;
}

.bg {
  // background: #f3f3f3;
}

.button1 {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  gap: 40rpx;

}

.footer-layout {

  // padding: 0 20rpx;
}

.flex {

  // height: 100%;
  padding: 20rpx 0;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.size-block {
  padding-bottom: 25rpx;
}
</style>
